<template>
  <div class="mall" @scroll="scrollHome">
    <transition mode="out-in"
      :name="transitionName"
      :enter-active-class="'slide-active'"
      :leave-active-class="'slide-active'">
      <keep-alive include="mallCategory">
        <router-view></router-view>
      </keep-alive>
    </transition>
    <mallFooter  v-if="$route.meta.showTab"></mallFooter>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import mallFooter from '@/components/Home/mall_footer.vue'
// import ArticleTuiJian from '@/components/shouYe/article_tuijian.vue'

export default {
  name: 'home',
  data() {
    return {
      transitionName: 'slide-left'
    }
  },
  components: {
    mallFooter
  },
  computed: {},
  methods: {
    scrollHome(e) {
      let et = e.target.scrollTop
      let th = et < 26 ? et : 26
      // console.log(th)
      this.$bus.$emit('scrollHOme', th)
    }
  },
  created() {
    this.$navigation.on('forward', () => {
      this.transitionName = 'slide-left'
    })
    this.$navigation.on('back', () => {
      this.transitionName = 'slide-right'
    })
  },
  mounted() {
    // console.log(this.$store)
    // console.log(this.$route)
  }
}
</script>
<style lang="scss">
.mall {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(30%, 0, 0);
}
.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-30%, 0, 0);
}
</style>
